/*
 * @Author: jiayu
 * @Date: 2022-09-27 15:21:58
 * @LastEditors: jiayu
 * @LastEditTime: 2023-11-20 15:42:23
 * @Description: 
 */
import { instance } from '@/services/jy-api/api';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import {
  PageContainer,
  ProTable,
} from '@ant-design/pro-components';
import { history, Link } from '@umijs/max';
import React, { useEffect, useRef, useState } from 'react';
import { Button, DatePicker, Modal } from 'antd';
import moment from 'moment'
import AccountTable from './AccountTable';
import LoginAccountTable from './LoginAccountTable';
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY/MM/DD';

const TableList: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [timeParams, setTimeParams] = useState()
  const [accountTableVisable, setAccountTableVisable] = useState(false)
  const [loginAccountTableVisable, setLoginAccountTableVisable] = useState(false)
  const [departmentId, setDepartmentId] = useState()
  const [type, setType] = useState(1)
  const columns: ProColumns<API.RuleListItem>[] = [
    {
      title: '时间段',
      dataIndex: 'time',
      renderFormItem: (
        _,
        { type, defaultRender, formItemProps, fieldProps, ...rest },
        form,
      ) => {
        if (type === 'form') {
          return null;
        }
        const status = form.getFieldValue('state');
        if (status !== 'open') {
          return (
            // value 和 onchange 会通过 form 自动注入。
            <RangePicker format={dateFormat} style={{ marginRight: 10 }} />
          );
        }
        return defaultRender(_);
      },
      hideInTable: true
    },
    {
      title: '部门',
      dataIndex: 'short_name',
      hideInSearch: true,
      render: (record, item) => {
        return <a onClick={() => {
          history.push("/loginLog2/" + item.id)
        }}>{record}</a>
        // return <Link to={"/loginLog2/" + item.id}>{record}</Link>
      }
    },
    {
      title: '账户总数',
      dataIndex: 'zh_number',
      valueType: 'textarea',
      hideInSearch: true,
      // render: (record, item) => {
      //   return <a onClick={() => {
      //     console.log({ item })
      //     setDepartmentId(item.id)
      //     setAccountTableVisable(true)
      //   }}>{record}</a>
      // }
    },
    {
      title: 'PC端登录人数',
      dataIndex: 'login_number',
      valueType: 'textarea',
      hideInSearch: true,
      render: (record, item) => {
        return <a onClick={() => {
          setDepartmentId(item.id)
          setLoginAccountTableVisable(true)
          setType(1)
        }}>{record}</a>
      }
    },
    {
      title: 'PC端登录人次',
      dataIndex: 'num',
      valueType: 'textarea',
      hideInSearch: true,
    },
    // {
    //   title: 'APP登录总次数',
    //   dataIndex: 'app_login_num',
    //   valueType: 'textarea',
    //   hideInSearch: true,
    // },
    {
      title: ' PC端登录率',
      dataIndex: 'login_lv',
      valueType: 'textarea',
      hideInSearch: true,
    },

    {
      title: '5G眼镜端登录人数',
      dataIndex: 'login_number_5G',
      valueType: 'textarea',
      hideInSearch: true,
      render: (record, item) => {
        return <a onClick={() => {
          setType(2)
          setDepartmentId(item.id)
          setLoginAccountTableVisable(true)
        }}>{record}</a>
      }
    },
    {
      title: '5G眼镜端登录人次',
      dataIndex: 'num_5G',
      valueType: 'textarea',
      hideInSearch: true,
    },
    {
      title: '5G眼镜端端登录率',
      dataIndex: 'login_lv_5G',
      valueType: 'textarea',
      hideInSearch: true,
    },

    {
      title: ' 僵尸账户总数 ',
      dataIndex: 'zh_js',
      valueType: 'textarea',
      hideInSearch: true,
    },
  ];

  const request = (params: {
    // querya
    /** 当前的页码 */
    current?: number;
    /** 页面的容量 */
    pageSize?: number;
    time: any[]
  },
    options?: { [key: string]: any },) => {
    const { time, ...data } = params
    localStorage.setItem('timeParams', time)
    setTimeParams(time)
    return instance('/index/Screen/loginDetails', {
      method: 'GET',
      params: {
        ...data,
        start_time: time ? moment(time[0]).format('YYYY-MM-DD') : undefined,
        end_time: time ? moment(time[1]).format('YYYY-MM-DD') : undefined,
        // department_id: 252
      },
    })
  }

  const dateChange = (e) => {
    console.log(e)
  }

  useEffect(() => {
    localStorage.removeItem('timeParams')
  }, [])

  return (
    <PageContainer>
      <ProTable<API.RuleListItem, API.PageParams>
        actionRef={actionRef}
        rowKey="key"
        request={request}
        columns={columns}
      />
      <Modal destroyOnClose open={accountTableVisable} width={1000} footer={<Button type='primary' onClick={() => setAccountTableVisable(false)}>确定</Button>} onCancel={() => setAccountTableVisable(false)}>
        <AccountTable timeParams={timeParams} departmentId={departmentId} />
      </Modal>
      <Modal destroyOnClose open={loginAccountTableVisable} width={1000} footer={<Button type='primary' onClick={() => setLoginAccountTableVisable(false)}>确定</Button>} onCancel={() => setLoginAccountTableVisable(false)}>
        <LoginAccountTable timeParams={timeParams} departmentId={departmentId} type={type} />
      </Modal>
    </PageContainer>
  );
};

export default TableList;
